<template>
	<view class="collect">
		<view class="list" v-if="list.length">
			<navigator class="item" v-for="item in list" :key="item.id" :url="`../../kind/productDetail/productDetail?id=${item.id}`">
				<image :src="item.pic" mode=""></image>
				<view class="content">
					<view class="name">{{ item.name }}</view>
					<view class="bottom">
						<view class="collectNum">收藏: 520</view>
						<view class="price">￥{{ item.price }}</view>
					</view>
				</view>
			</navigator>
		</view>
		<empty v-else></empty>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [] // 收藏列表
		};
	},
	methods: {
		getCollectList() {
			const list = uni.getStorageSync('collectList');
			if (list) {
				this.list = list;
			}
		}
	},
	onLoad() {
		this.getCollectList();
	}
};
</script>

<style lang="scss" scoped>
.collect {
	overflow: hidden;
	.list {
		margin: 40rpx 30rpx;
		.item {
			display: flex;
			margin: 40rpx auto;
			box-sizing: border-box;
			background: #fff;
			border-radius: 8rpx;
			padding: 30rpx;
			image {
				width: 126rpx;
				height: 176rpx;
				border-radius: 16rpx;
			}
			.content {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;
				font-size: 24rpx;
				.name {
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
					color: #3e3e3e;
					margin-top: 20rpx;
				}
				.bottom {
					display: flex;
					justify-content: space-between;
					.price {
						font-size: 32rpx;
						color: #1c4b47;
						font-weight: 600;
					}
				}
			}
		}
	}
}
</style>
